<template>
  <div class="productInnovations ql-editor">
    <div class="producT_h1">{{detail.title}}</div>
    <div v-html="detail.description" class="content"></div>
  </div>
</template>

<script>
import api from "servicePath/index";
import { mapState } from "vuex";
export default {
  props:{
    anchorId:{
      type: String,
      default: ''
    }
  },
  data () {
    return {
      detail: ""
    }
  },
  computed: {
    ...mapState(["lang"])
  },
  mounted () {
    this.handleGetHistoryWall()
  },
  methods: {
    async handleGetHistoryWall(){
      const params = {
        language: this.lang,
        anchor: this.anchorId
      }
      const res = await api.getHistoryWall(params)
      this.detail = res.data || {}
    }
  }
};
</script>
<style lang="scss">
  .foundation-frame-wrap .historyWallDialog .el-dialog__body{
    padding: 20px !important;
  }
</style>
<style lang="scss" scoped>
.productInnovations{
  padding:0 20px 20px 20px;
  max-height: 540px;
  overflow-y: auto;
  p {
    word-break: break-word;
  }
  .producT_h1 {
    font-size: 30px;
    margin-bottom: 20px;
    padding-top: 10px;
  }
  /deep/ .ql-video{
    width: 100%;
    height: 508px;
  }
}

@media (max-width: 414px) {
  .productInnovations{
    max-height: 100vh !important;
    .producT_h1 {
      font-size: 28px;
      margin-bottom: 20px;
      padding-top: 10px;
    }
    /deep/ .ql-video{
      width: 100%;
      height: 188px;
    }
  }
}
</style>
